/* eslint-disable no-unused-vars */
import React, { useEffect, useState } from 'react'
import { Space, Form, Input, Button } from 'antd'
import '../assets/setting.css'
import GlobalContext from './GlobalContext.jsx'

let context
const { loading } = window.api.common
const { initMigPath, openDirDialog, formSetRef } = window.api.setting

function Setting() {
  useEffect(() => {
    const interval = setInterval(() => {
      if (context) {
        loading(context, true)
        initMigPath(context)
        clearInterval(interval)
        loading(context, false)
      }
    }, 5)
  }, [])

  return (
    <GlobalContext.Consumer>
      {(ctx) => {
        context = ctx
        return (
          <div style={{ paddingTop: '20px' }}>
            <div
              style={{
                borderRadius: '10px',
                padding: '10px',
                backgroundColor: '#31333c',
                color: '#fff',
                opacity: 0.8
              }}
            >
              <div style={{ marginBottom: '10px' }}>{ctx.t('setMigPath')}</div>
              <div>
                <Form ref={formSetRef}>
                  <Form.Item>
                    <Space.Compact style={{ width: '100%' }}>
                      <Form.Item name={'migPath'} style={{ width: '100%' }}>
                        <Input placeholder={ctx.t('migPathPlaceholder')} disabled={true} />
                      </Form.Item>
                      <Button onClick={() => openDirDialog(ctx)}>{ctx.t('select')}</Button>
                    </Space.Compact>
                  </Form.Item>
                  <div></div>
                </Form>
              </div>
              <div style={{ marginTop: '-30px', fontSize: '13px' }}>{ctx.t('setMigTip')}</div>
            </div>
          </div>
        )
      }}
    </GlobalContext.Consumer>
  )
}

export default Setting
